<template>
  <v-app-bar
      app
      short
      color="transparent"
      flat
      dark
    >
      <v-app-bar-nav-icon color="primary" @click="onClick"></v-app-bar-nav-icon>
      <div class="d-flex align-center">
        <!-- <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        /> -->
      </div>
      <v-spacer></v-spacer>
      <v-btn icon color="indigo">
        <v-icon>mdi-bell</v-icon>
      </v-btn>

      <v-menu
        offset-y
        open-on-hover
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            v-on="on"
            color="indigo"
          >
            <v-icon>mdi-translate</v-icon>
          </v-btn>
        </template>

        <v-list dense>
          <v-list-item link @click="handleSetLanguage('zh')">
            <v-list-item-title>简体中文</v-list-item-title>
          </v-list-item>
          <v-list-item link @click="handleSetLanguage('en')">
            <v-list-item-title>English</v-list-item-title>
          </v-list-item>
          <v-list-item link @click="handleSetLanguage('th')">
            <v-list-item-title>ภาษาไทย</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

      <v-menu
        offset-y
        open-on-hover
      >
        <template v-slot:activator="{ on, attrs }">
          <v-btn
            icon
            v-bind="attrs"
            v-on="on"
            color="indigo"
          >
            <v-icon>mdi-account</v-icon>
          </v-btn>
        </template>

        <v-list dense>
          <v-list-item link>
            <v-list-item-title>设置</v-list-item-title>
          </v-list-item>
          <v-divider />
          <v-list-item link @click="logout">
            <v-list-item-title>退出</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    language() {
      return this.$store.state.app.language
    }
  },
  methods: {
    ...mapMutations('app', ['setDrawer']),
    
    onClick() {
      this.setDrawer(!this.$store.state.app.drawer)
    },

    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.$vuetify.lang.current = this.$i18n.locale
      this.$store.dispatch('app/setLanguage', lang)
    },

    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>
